<template>
  <div class="chartbox" ref="chartRef"> </div>
</template>  
  
<script setup>
import { ref, onMounted, onUnmounted, defineProps } from 'vue'
import { useMapStoreStore } from '../../../stores/index'
import * as Special from '../../../api/topic'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'

const store = useMapStoreStore()
const props = defineProps({
  mimedata: {
    type: String,
    required: true
  }
})

// 创建一个响应式引用来存储 DOM 元素的引用

const PublicChartOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: 40,
    right: 20,
    left: 50,
    bottom: 40
  },
  xAxis: {
    type: 'category',
    data: ['某某县', '某某县', '某某县', '某某县', '某某县'],
    axisLine: {
      lineStyle: {
        color: '#B9EEFF'
      }
    },
    axisTick: { show: false },
    axisLabel: {
      margin: 10,
      color: '#B9EEFF',
      textStyle: {
        fontSize: 14,
        color: '#B9EEFF'
      }
    }
  },
  yAxis: {
    axisLabel: {
      formatter: '{value}',
      color: '#B9EEFF'
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#fff'
      }
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255,255,255,0.12)'
      }
    }
  },
  series: {
    type: 'bar',
    barWidth: '20px',
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: ' #01C2FF ' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(0,77,167,1)' // 100% 处的颜色
            }
          ],
          false
        ),
        barBorderRadius: [30, 30, 0, 0],
        shadowColor: 'rgba(1, 194, 255, 0)'
      }
    },
    label: {
      show: true,
      position: 'top', // 在柱状图的上方显示文字
      textStyle: {
        color: '#B9EEFF' // 文字颜色为黑色
      }
    }
  }
}

function convertToRoman(num) {
    const romanNumerals = [
        { value: 1000, symbol: 'M' },
        { value: 900, symbol: 'CM' },
        { value: 500, symbol: 'D' },
        { value: 400, symbol: 'CD' },
        { value: 100, symbol: 'C' },
        { value: 90, symbol: 'XC' },
        { value: 50, symbol: 'L' },
        { value: 40, symbol: 'XL' },
        { value: 10, symbol: 'X' },
        { value: 9, symbol: 'IX' },
        { value: 5, symbol: 'V' },
        { value: 4, symbol: 'IV' },
        { value: 1, symbol: 'I' }
    ];
    let romanNum = '';
    for (let i = 0; i < romanNumerals.length; i++) {
        while (num >= romanNumerals[i].value) {
            romanNum += romanNumerals[i].symbol;
            num -= romanNumerals[i].value;
        }
    }
    return romanNum;
}

const selectColor = (i) => {
  const quickColors = ['#841811', '#B72619', '#EB3324', '#F0867F', '#F6BFC1']

  if (i > 8000) {
    return quickColors[4]
  }
  if (i > 2300) {
    return quickColors[3]
  }
  if (i > 400) {
    return quickColors[2]
  }
  if (i > 100) {
    return quickColors[2]
  }
  return quickColors[3]
}

//对应统计图映射
const mimeMap = {
  lsdz: {
    ajax: Special.getStatHistoricalQuakeCount
  },
  czdz: {
    ajax: Special.getStatDisasterQuakeCount
  },
  rk: {
    ajax: Special.getStatPopulationCount
  },
  rkmd: {
    ajax: Special.getStatPopulationDensity
  },
  jj: {
    ajax: Special.getStatEconomyCount
  },
  jjmd: {
    ajax: Special.getStatEconomyDensity
  },
  yy: {
    ajax: Special.getStatHospital
  },
  xx: {
    ajax: Special.getStatSchool
  },
  sk: {
    ajax: Special.getStatReservior
  },
  hp: {
    ajax: Special.getStatLandslide
  },
  ldqrk: {
    ajax: Special.getStatQuakeRangePopulation
  },
  ldqmj: {
    ajax: Special.getStatQuakeRangeArea
  }
}

//请求接口
const getChartData = () => {
  mimeMap[props.mimedata].ajax({ eqid: store.eqid }).then((e) => {
    changeData(e)
  })
}

const changeData = (e) => {

  switch (props.mimedata) {
    case 'czdz':
      initCzdz(e)
      break
    case 'lsdz':
      initCzdz(e)
      break
    case 'rk':
      initRk(e)
      break
    case 'rkmd':
      initRkmd(e)
      break
    case 'yy':
      initYy(e)
      break
    case 'xx':
      initXx(e)
      break
    case 'sk':
      initSk(e)
      break
    case 'hp':
      initHp(e)
      break
    case 'jj':
      initJj(e)
      break
    case 'jjmd':
      initJjmd(e)
      break
    case 'ldqrk':
      initLdqrk(e)
      break
    case 'ldqmj':
      initLdqmj(e)
      break
  }
}

//成灾地震 历史地震
function initCzdz(e) {
  e = e[0]
  const zcdzOPtion = {
    title: {
      text: '100公里范围内',
      right: 10,
      y: 10,
      textStyle: {
        color: '#B9EEFF',
        fontSize: '14',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight: 'normal'
      }
    },
    xAxis: {
      data: ['3.0-3.9', '4.0-4.9', '5.0-5.9', '6.0-6.9', '7.0-7.9', '8.0+']
    },
    yAxis: {
      name: '个'
    },
    series: {
      data: [e.section1, e.section2, e.section3, e.section4, e.section5, e.section6]
    }
  }
  initChart(zcdzOPtion)
}

//人口
function initRk(e) {
  e = e[0]
  const perOPtion = {
    xAxis: {
      data: ['5公里', '10公里', '20公里', '50公里', '100公里']
    },
    yAxis: {
      name: '万人'
    },
    series: {
      data: [e.section1, e.section2, e.section3, e.section4, e.section5]
    }
  }
  initChart(perOPtion)
}

//人口密度
function initRkmd(e) {
  e = e[0]
  const perMdOPtion = {
    xAxis: {
      data: ['5公里', '10公里', '20公里', '50公里', '100公里']
    },
    yAxis: {
      name: '人/平方公里'
    },
    series: {
      data: [e.section1, e.section2, e.section3, e.section4, e.section5]
    }
  }
  initChart(perMdOPtion)
}

//医院
function initYy(e) {
  var xdata = new Set()
  var sdata1 = []
  var sdata2 = []
  for (const item of e) {
    xdata.add(`(${convertToRoman(item.intensity)}度)`)
    if (item.detailType === '0') {
      sdata1.push(item.num)
    }
    if (item.detailType === '1') {
      sdata2.push(item.num)
    }
  }
  xdata = [...xdata]

  const historyOption = {
    legend: {
      top: '5%',
      left: 'right',
      icon: 'circle',
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      data: xdata || []
    },
    yAxis: {
      name: '个'
    },

    series: [
      {
        name: '综合医院',
        type: 'bar',
        stack: '总量',
        barMaxWidth: 35,
        barGap: '10%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#17A6EB' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#1D58D9' // 100% 处的颜色
                }
              ],
              false
            ),
            barBorderRadius: [0, 0, 5, 5],
            shadowColor: 'rgba(1, 194, 255, 0)'
          }
        },
        data: sdata1
      },

      {
        name: '专科医院',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#1ADED1' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#20A282' // 100% 处的颜色
                }
              ],
              false
            ),
            barBorderRadius: [30, 30, 0, 0],
            shadowColor: 'rgba(1, 194, 255, 0)'
          }
        },
        label: {
          show: true,
          position: 'top', // 在柱状图的上方显示文字
          textStyle: {
            color: '#B9EEFF', // 文字颜色为黑色
            formatter: function (p, p2) {
              return p.value > 0 ? p.value : ''
            }
          }
        },
        data: sdata2
      }
    ]
  }

  initChart(historyOption)
}

//学校
function initXx(e) {
  var xdata = new Set()
  var sdata1 = []
  var sdata2 = []
  var sdata3 = []
  var sdata4 = []
  for (const item of e) {
    xdata.add(`(${convertToRoman(item.intensity)}度)`)
    if (item.detailType === '2') {
      sdata1.push(item.num)
    }
    if (item.detailType === '3') {
      sdata2.push(item.num)
    }
    if (item.detailType === '4') {
      sdata3.push(item.num)
    }
    if (item.detailType === '5') {
      sdata4.push(item.num)
    }
  }
  xdata = [...xdata]

  const schoolOption = {
    legend: {
      top: '5%',
      left: 'right',
      icon: 'circle',
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      data: xdata
    },
    yAxis: {
      name: '个'
    },
    series: [
      {
        name: '幼儿园',
        type: 'bar',
        stack: '总量',
        barGap: '10%',
        barMaxWidth: 35,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#DF2427 ' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#E85378' // 100% 处的颜色
                }
              ],
              false
            ),
            barBorderRadius: [0, 0, 5, 5],
            shadowColor: 'rgba(1, 194, 255, 0)'
          }
        },
        data: sdata1
      },

      {
        name: '小学',
        type: 'bar',
        stack: '总量',
        barGap: '10%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#D67023 ' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#D0B826' // 100% 处的颜色
                }
              ],
              false
            ),
            barBorderRadius: [0, 0, 0, 0]
          }
        },

        data: sdata2
      },

      {
        name: '中学',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#1C58D9  ' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#17A4EB' // 100% 处的颜色
                }
              ],
              false
            ),
            barBorderRadius: [0, 0, 0, 0]
          }
        },
        data: sdata3
      },
      {
        name: '高等院校',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#1ADED1 ' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#20A282' // 100% 处的颜色
                }
              ],
              false
            ),
            barBorderRadius: [30, 30, 0, 0]
          }
        },
        data: sdata4
      }
    ]
  }
  initChart(schoolOption)
}

//水库
function initSk(e) {
  var xdata = new Set()
  var sdata1 = []

  for (const item of e) {
    xdata.add(`(${convertToRoman(item.intensity)}度)`)
    if (item.detailType === '6') {
      sdata1.push(item.num)
    }
  }
  xdata = [...xdata]

  const weaterOption = {
    xAxis: {
      data: xdata
    },
    yAxis: {
      name: '个'
    },
    series: {
      data: sdata1,
      barWidth: 30,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#E5D225 ' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(253, 198, 48, 0)  ' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [30, 30, 0, 0],
          shadowColor: 'rgba(1, 194, 255, 0)'
        }
      }
    }
  }
  initChart(weaterOption)
}
//滑坡
function initHp(e) {
  var xdata = new Set()
  var sdata = []
  var obj = {}

  for (const item of e) {
    let a = convertToRoman(item.level);
    obj[a] ? obj[a]+=Number(item.num) :  obj[a] = Number(item.num)
    // xdata.add(`(${convertToRoman(item.level)}度)`)
    // sdata.push(item.num)
  }
  // xdata = [...xdata]
  xdata = Object.keys(obj)
 for (let index = 0; index < xdata.length; index++) {
  xdata[index] =   xdata[index] +"度"
 }
  sdata = Object.values(obj)
  const hpOption = {
    xAxis: {
      data: xdata
    },
    yAxis: {
      name: '个'
    },
    series: {
      data: sdata,
      barWidth: 30,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#BF8EFF' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(192, 114, 252, 0)  ' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [30, 30, 0, 0],
          shadowColor: 'rgba(1, 194, 255, 0)'
        }
      }
    }
  }
  initChart(hpOption)
}

//各烈度区人口
function initLdqrk(e) {
  var xdata = []
  var sdata = []
  for (const element of e) {
    xdata.push(`(${convertToRoman(element.intensity)}度)`)
    sdata.push(element.population)
  }
  const persOption = {
     grid: {
      top: 40,
      left: 10,
      right:10,
      bottom: 10,
      containLabel: true,
    },
    xAxis: {
      data: xdata 
    },
    yAxis: {
      type: 'value',
      name: '万人',
      nameTextStyle: {
        color: '#B9EEFF',
        fontSize: 14
      },

      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      data: ['VI(6度)', 'VI(7度)', 'VI(8度)']
    },
    series: {
      data: sdata || [15, 10, 1],
      barWidth: 30,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#01FFEE' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(1, 255, 255, 0) ' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [30, 30, 0, 0],
          shadowColor: 'rgba(1, 194, 255, 0)'
        }
      }
    }
  }
  initChart(persOption)
}

//各烈度区密度
function initLdqmj(e) {
  
  var xdata = []
  var sdata = []
  for (const element of e) {
    xdata.push(`(${convertToRoman(element.intensity)}度)`)
    sdata.push(Math.floor(element.area))
  }
  const quickOptin = {
    grid: {
      top: 40,
      left: 10,
      bottom: -20,
      // right: 40,
      containLabel: true,
    },

    xAxis: {
      show: false,
      type: 'value'
    },
    yAxis: {
      type: 'category',
      name: '平方公里',
      nameTextStyle: {
        color: '#B9EEFF',
        fontSize: 14
      },

      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      data: xdata
    },
    series: {
      name: '面积',
      type: 'bar',
      itemStyle: {
        normal: {
          color: selectColor()
        }
      },
      label: {
        show: true,
        position: 'right', // 在柱状图的上方显示文字
        textStyle: {
          color: '#B9EEFF' // 文字颜色为黑色
        }
      },
      barWidth: 20,
      data: sdata 
    }
  }
  initChart(quickOptin)
}
//经济
function initJj(e) {
  e = e[0]
  const moneyOPtion = {
    xAxis: {
      data: ['5公里', '10公里', '20公里', '50公里', '100公里']
    },
    yAxis: {
      name: '万元'
    },
    series: {
      data: [e.section1, e.section2, e.section3, e.section4, e.section5],
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#FF7301' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(255, 98, 1, 0) ' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [30, 30, 0, 0],
          shadowColor: 'rgba(1, 194, 255, 0)'
        }
      }
    }
  }
  initChart(moneyOPtion)
}

//经济密度
function initJjmd(e) {
  e = e[0]
  const moneyMdOPtion = {
    xAxis: {
      data: ['5公里', '10公里', '20公里', '50公里', '100公里']
    },
    yAxis: {
      name: '万元/平方公里'
    },
    series: {
      data: [e.section1, e.section2, e.section3, e.section4, e.section5],
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#FF7301' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(255, 98, 1, 0) ' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [30, 30, 0, 0],
          shadowColor: 'rgba(1, 194, 255, 0)'
        }
      }
    }
  }
  initChart(moneyMdOPtion)
}

const chartRef = ref(null)
let myChart = null
// 初始化图表
const initChart = (option) => {
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value)
    const options = {
      ...PublicChartOption,
      ...option,
      xAxis: {
        ...PublicChartOption.xAxis,
        ...option.xAxis
      },
      yAxis: {
        ...PublicChartOption.yAxis,
        ...option.yAxis
      },
      series: Array.isArray(option.series)
        ? option.series
        : [
            {
              ...PublicChartOption.series,
              ...option.series
            }
          ]
    }
    myChart.setOption(options)
    window.addEventListener('resize', () => {
      myChart.resize()
    })
    // 指定图表的配置项和数据
  }
}

// 组件挂载后初始化图表
onMounted(() => {
  getChartData()
})

// 组件卸载时销毁图表实例，避免内存泄漏
onUnmounted(() => {
  if (myChart) {
    myChart.dispose()
  }
})
</script>  
  
<style scoped>
.chartbox {
  height: 100%;
}
</style>